<div #diagramcontainer style="height: 800px; width: 100%;">
    <div #ref class="diagram-container" style="padding: 0.1rem">
  
    </div>
  
    <nz-collapse style="position: absolute;
    right: 30px;
    top: 200px;
    width: 500px;">
      <nz-collapse-panel *ngFor="let panel of panels" [nzHeader]="panel.name" [nzActive]="panel.active"
        [nzDisabled]="panel.disabled">
  
        <form nz-form se-container="1" labelWidth="100" gutter="32">
          <se label="Id" error="Id">
            <input nz-input placeholder="" [(ngModel)]="form.id" readonly="readonly"
              [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)" />
          </se>
          <se label="对象Id" error="对象Id" *ngIf="false">
            <input nz-input placeholder="" [(ngModel)]="form.flowid" readonly="readonly"
              [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)" />
          </se>
  
          <se label="对象名称" error="对象名称" *ngIf="false">
            <input nz-input placeholder="" [(ngModel)]="form.flowname" readonly="readonly"
              [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)" />
          </se>
  
          <se label="备注" error="备注">
            <input nz-input placeholder="" [(ngModel)]="form.flowdesc" name="flowdesc"
              [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)" />
          </se>
  
   
  
          <se label="条件表达式" error="条件表达式" *ngIf="form.conditionexpressionVisable"> 
            <nz-input-group [nzSuffix]="suffixTemplateInfo" class="exgroup" >
            <textarea nz-input [(ngModel)]="form.conditionexpression" placeholder="条件表达式"
              [ngModelOptions]="{ standalone: true }" (ngModelChange)="ngModelChange($event)"></textarea>

            </nz-input-group>
              <ng-template #suffixTemplateInfo>
                <em nz-icon nz-tooltip nzTooltipTitle="" nzType="info-circle" (click)="showce()" ></em>
              </ng-template>
          </se>
  
          <se label="脚本类型" error="脚本类型" *ngIf="form.flowscripttypeVisable">
            <nz-select [(ngModel)]="form.flowscripttype" [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="flowscripttypeChange($event)">
              <nz-option nzValue="javascript" nzLabel="javascript"></nz-option>
              <nz-option nzValue="executor" nzLabel="executor"></nz-option>
              <nz-option nzValue="python" nzLabel="python"></nz-option>
              <nz-option nzValue="sql" nzLabel="sql"></nz-option>
              <nz-option nzValue="lua" nzLabel="lua"></nz-option>
              <nz-option nzValue="csharp" nzLabel="csharp"></nz-option>
  
            </nz-select>
          </se>
          <se label="执行器" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">
            <nz-select [(ngModel)]="form.nodeProcessClass" [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="ngModelChange($event)">
  
              <nz-option *ngFor="let option of executors" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
  
  
            </nz-select>
          </se>
  
          <se label="脚本" error="脚本" *ngIf="form.flowscriptVisable">
            <nz-code-editor [nzToolkit]="toolkit" [class.full-screen]="fullScreen" (ngModelChange)="ngModelChange($event)"
              style="width: 100%; height: 500px; padding-top: 1rem" class="editor" [(ngModel)]="form.flowscript"
              [ngModelOptions]="{ standalone: true }" [nzEditorOption]="{ theme: 'vs',language: 'csharp' }">
            </nz-code-editor>
          </se>
          <se label="执行器参数(JSON)" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">
  
            <nz-code-editor [nzToolkit]="toolkit" [class.full-screen]="fullScreen" (ngModelChange)="ngModelChange($event)"
              style="width: 100%; height: 500px; padding-top: 1rem" class="editor" [(ngModel)]="form.nodeProcessParams"
              [ngModelOptions]="{ standalone: true }" [nzEditorOption]="{ theme: 'vs',language: 'json' }">
            </nz-code-editor>
  
          </se>
  
     
        </form>
  
  
  
      </nz-collapse-panel>
    </nz-collapse>
  
  
  
    <ng-template #toolkit>
      <i nz-icon [class.active]="fullScreen" nz-tooltip nzTooltipTitle="Toggle Fullscreen"
        [nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'" (click)="toggleFullScreen()"></i>
    </ng-template>
    <ng-template #extraTemplate>
      <a>More</a>
    </ng-template>
  
  
    <!-- <nz-collapse>
          <nz-collapse-panel [nzHeader]="nzHeader" nzExpandIconPosition="right" nzActive="false"> -->
  
    <!-- </nz-collapse-panel>
        </nz-collapse> -->
  </div>
